<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');  
// 创建用于图案的新image对象。
var img = new Image();
img.src = 'images/pattern.png';
img.onload = function(){
	// 创建图案。  
	var ptrn = ctx.createPattern(img,'repeat');
	ctx.fillStyle = ptrn;
	ctx.fillRect(0,0,600,600);
}

</script>
</body>
</html>  
